<template>
  <div id="dialog" @html="html" @click="sure()">
    <div class="cover" v-show="showCover"></div>
    <transition name="slide">
      <div class="window" v-show="show" @click.stop>
        <div id="text" v-html="text"> </div>
        <button @click="sure()" class="yellowbtn">确定</button>
      </div>
    </transition>
  </div>
</template>
<script>
  export default {
    name:'introduceDialog',
    data(){
      return{
        text: '<div id="innerhtml" style="font-size: 0.24rem;color: #353434">' +
          '        <img src= '+require("../common/imgs/jojojojop.png")+' alt="图片" class="width100">'+
          '        <p style="line-height: 150%;padding: 0.2rem 0;padding-bottom: 0">'+
          '          每日分币后计算产出进度（产出进度=当前的累计产币量*实时币价/合约已支付金额）：' +
          '        </p>' +
          '        <div class="showTips">' +
          '          <p>' +
          // '            <img src='+require("../common/imgs/omoko.png")+' alt="图片">' +
          '            <span class="title">若合约期内产出进度达到100%：</span><br>' +
          '            <span class="lz">次日自动进入产出共享阶段，平台方将实时短信告知，用户可自行选择是否提币售出，用户后续分币比例调整为日产量的70%。</span>' +
          '          </p>' +
          '          <p>' +
          // '            <img src='+require("../common/imgs/serfghj.png")+' alt="图片">' +
          '            <span class="title">若合约到期产出进度仍未达到100%：</span><br>' +
          '            <span class="lz"> 算力宝销售方以到期时币价向用户补齐差额，差额以BTC支付。</span>' +
          '          </p>' +
                   '<p>结算时间为合约到期当日<span style="color: #F67311">12:00:00</span></p>'+
                   '<p style="color: #888686;padding-top: 0.1rem">注：以上币价计算基于人人矿场公示的算力指数及OKex的BHP价格。</p>'+
          '        </div>' +
          '      </div>',
        show : false,
        showCover : false,
        timeout : null,
      }
    },
    props: {
      'html': {
        /*内容*/
        type: String,
        default: ''
      },
    },
    mounted() {
      this.text = this.html || this.text;
    },
    methods:{
      changeHtml( html ){
        //可以替换文本
        this.text = html || this.text;
      },
      sure(){
        let thiz = this;
        this.show = false;
        thiz.timeout = setTimeout(function () {
          thiz.showCover = false;
          clearTimeout(thiz.timeout);
          thiz.timeout = null;
        },200);
      },
      dialogShow(){
        /*显示弹窗*/
        this.show = true;
        this.showCover = true;
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  /*动画*/
  .window{
    padding:0.3rem;width: calc( 100% - 0.6rem );height:auto;position: fixed;
    top:50%;left: 0.3rem;background: #fff;border-radius: 0.1rem;overflow: hidden;z-index: 6;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  #text{
    height: 6rem;overflow-y: scroll;
  }
  #text::-webkit-scrollbar {width:0px; height:0px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  #text::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} /*定义滚动条轨道 内阴影+圆角*/
  #text::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);} /*定义滑块 内阴影+圆角*/
  /deep/ #innerhtml{
    .showTips p {
      line-height: 150%;
      padding-top: 0.3rem;
      .title{
        color: #262626;display: inline-block;width: 100%;padding-bottom: 0.1rem;
      }
      img{
        width: 0.3rem;vertical-align: middle;
      }
      .lz{
        padding-left: 0rem;display: inline-block;width: 100%;line-height: 150%;color: #898989;;
      }
    }
  }
  .yellowbtn{
    border-radius: 0.04rem;height: 0.8rem;font-size: 0.28rem;
  }
  @media screen and (min-width: 1025px) {
    .window{width:  450px;left: 50%;margin-left:-225px;}
  }
  .slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, -100%, 0) translateY(-50%) rotateX(-90deg);
      visibility: visible;
      opacity: 0;
    }
    to {
      transform: translateZ(0) translateY(-50%) rotateX(0deg);
      opacity: 1;
    }
  }
  @keyframes slideOutDown {
    0% {
      transform: translateZ(0) translateY(-50%)  rotateX(0deg);
      opacity: 1;
    }
    to {
      visibility: hidden;
      opacity: 0;
      transform: translate3d(0, -100%, 0) translateY(-50%)  rotateX(-90deg);
    }
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
</style>
